<template>
    <div class="physicianAudit">
        <!-- 查询内容 -->
        <Row type="flex" justify="space-around" class="code-row-bg">
            <Col span="24">
                <div class="tmpHeader">
                    <span
                        :class="{active:status == item.value }"
                        @click="changeTab(item) "
                        v-for="(item,index) in tabList"
                    >{{ item.title }}</span>
                </div>
            </Col>
        </Row>
        <Row class="margin-up-down">
            <Col span="24">
            <div class="margin-up-down">
                <fourLevelLinkage
                    @changeProvince="changeProvince"
                    @changeCity="changeCity"
                    @changeArea="changeArea"
                    @changeHospital="changeHospital"
                    :province="province"
                    :city="city"
                    :area="area"
                    :hospital="hospital"
                    :isBack="isBack"
                ></fourLevelLinkage>
            </div>
            <div class="margin-up-down">
                 <Input
                    suffix="ios-search"
                    placeholder="输入主讲人审核人或标题进行查询"
                    style="width: 230px"
                    v-model="search"
                    clearable
                />
            </div>
            <div class="margin-up-down">
                <Select v-model="liveStatus" style="width:160px" v-if='status==1' clearable>
                    <Option
                        v-for="item in livexsList"
                        :value="item.id"
                        :key="item.id"
                        style='text-align:center;'
                    >{{ item.name }}</Option>
                </Select>
                <Select v-model="liveStatus" style="width:160px" v-if='status==2' clearable>
                    <Option
                        v-for="item in livexsList2"
                        :value="item.id"
                        :key="item.id"
                        style='text-align:center;'
                    >{{ item.name }}</Option>
                </Select>
            </div>
            <div class="margin-up-down">
                <Button type="primary" icon="ios-search" @click="searchInput"></Button>
            </div>
            </Col>
        </Row>
        <Table stripe :columns="columns" :data="data1"></Table>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loading" />
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import fourLevelLinkage from "@/components/fourLevelLinkage";
export default {
    components:{
        fourLevelLinkage
    },
    data() {
        return {
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack:1,

            search: "",
            columns:[],
            live: [
                {
                    title: "排序",
                    key: "iSum",
                    align: "center",
                    render: (h, params) => {
                        let iSum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iSum);
                    }
                },
                {
                    title: "课堂标题",
                    key: "title",
                    align: "center"
                },
                {
                    title: "首页图片",
                    key: "headImg",
                    align: "center",
                    render: (h, params) => {
                        let avatar = this.pictureFormat(params.row.headImg);
                        if (Boolean(avatar)) {
                            avatar = this.fileBaseUrl + avatar;
                            return h("img", {
                                attrs: {
                                    src: avatar || "",
                                    style: "width:80px;height:40px;"
                                }
                            })
                        } else {
                            return h("span", {
                                attrs:{
                                    style:"color:gray;"
                                }
                            },'暂无图片')
                        }
                    }
                },
                {
                    title: "主讲人姓名",
                    key: "doctorName",
                    align: "center"
                },
                {
                    title: "播放来源",
                    key: "videoSource",
                    align: "center"
                },
                {
                    title: "课堂类型",
                    key: "columnName",
                    align: "center"
                },
                {
                    title: "状态",
                    key: "status",
                    align: "center"
                },
                {
                    title: "审核人",
                    key: "auditorName",
                    align: "center"
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    // width: 120,
                    render: (h, params) => {
                        let id = params.row.id;
                        let playStatus = params.row.playStatus
                        let columnName = params.row.columnName
                        return h(
                            "span",
                            {
                                attrs: {
                                    href: "javascript:void(0);"
                                },
                                style: {
                                    color:"#5362e1",                          width: "60px"
                                },
                                on: {
                                    click: () => {
                                        //   公用方法
                                        this.functionJS.queryNavgationTo(
                                            this,
                                            "/index/publicOperation/healthAudit/search",
                                            {
                                                id,
                                                playStatus,
                                                columnName,
                                                pageNo: this.pageNo,
                                                province: this.province,
                                                city: this.city,
                                                area: this.area,
                                                hospital: this.hospital,
                                                isBack:2,
                                                status:this.status
                                            }
                                        );
                                    }
                                }
                            },
                            "查看"
                        );
                    }
                }
            ],
            status: 2,
            tabList: [
                 {
                    title: "点播",
                    value: 2
                },
                {
                    title: "直播",
                    value: 1
                },
            ],
            data1: [],
            count: 10,
            pageNo: 1,
            pageSize: 10,
            // 状态列表
            livexsList:[
                {
                    id:"1",
                    name:"待审核"
                },
                {
                    id:"2",
                    name:"审核通过"
                },
                {
                    id:"3",
                    name:"审核未通过"
                },
                {
                    id:"4",
                    name:"下架"
                },
                {
                    id:"5",
                    name:"正在直播"
                },
                {
                    id:"6",
                    name:"已完成"
                },
                {
                    id:"7",
                    name:"已撤回"
                },
                {
                    id:"8",
                    name:"已关闭"
                }
            ],
            livexsList2:[
                {
                    id:"1",
                    name:"待审核"
                },
                {
                    id:"2",
                    name:"审核通过"
                },
                {
                    id:"3",
                    name:"审核未通过"
                },
                {
                    id:"4",
                    name:"下架"
                },
            ],
            liveStatus:"",
            verify: [
                {
                    title: "排序",
                    key: "iSum",
                    align: "center",
                    render: (h, params) => {
                        let iSum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iSum);
                    }
                },
                {
                    title: "直播标题",
                    key: "title",
                    align: "center"
                },
                {
                    title: "主播医生",
                    key: "doctorName",
                    align: "center"
                },
                {
                    title: "所在医院",
                    key: "hospitalName",
                    align: "center"
                },
                {
                    title: "直播类型",
                    key: "liveForm",
                    align: "center",
                    render:(h,params)=>{
                        let status = params.row.liveForm
                        let content = ""
                        this.liveListForm.forEach(item => {
                            if(Number(item.id) == Number(status)) {
                                content = item.name
                            }
                        })
                        return h('span', {

                        }, content)
                    }
                },
                {
                    title: "直播状态",
                    key: "playStatus",
                    align: "center",
                    render:(h,params)=>{
                        let status = params.row.playStatus
                        let content = ""
                        this.livexsList.forEach(item=>{
                            if(Number(item.id)==Number(status)) {
                                content=item.name
                            }
                        })
                        return h('span',{

                        },content)
                    }
                },
                {
                    title: "审核人",
                    key: "auditorName",
                    align: "center"
                },
                {
                    title: "预计直播时间",
                    key: "aboutStartTime",
                    align: "center"
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    // width: 60,
                    render: (h, params) => {
                        let id = params.row.id;
                        return h(
                            "span",
                            {
                                attrs: {
                                    href: "javascript:void(0);"
                                },
                                style: {
                                    color: " #5362e1",                      
                                    width: "60px"
                                },
                                on: {
                                    click: () => {
                                        //   公用方法
                                        this.functionJS.queryNavgationTo(
                                            this,
                                            "/index/publicOperation/healthAudit/review",
                                            {
                                                province: this.province,
                                                city: this.city,
                                                area: this.area,
                                                hospital: this.hospital,
                                                isBack:2,
                                                id,
                                                pageNo: this.pageNo,
                                                status: this.status,
                                            }
                                        );
                                    }
                                }
                            },
                            "查看"
                        );
                    }
                }
            ],
            // 直播形式
            liveListForm: [
                {
                    id:"0",
                    name:"轻直播"
                },
                {
                    id:"1",
                    name:"语音直播"
                },
                {
                    id:"2",
                    name:"视频直播"
                },
            ],
        };
    },
    created() {
        this.province = this.$route.query.province
            ? parseInt(this.$route.query.province)
            : null;
        this.city = this.$route.query.city
            ? parseInt(this.$route.query.city)
            : null;
        this.area = this.$route.query.area
            ? parseInt(this.$route.query.area)
            : null;
        this.hospital = this.$route.query.hospital
            ? this.$route.query.hospital
            : null;
        this.isBack = this.$route.query.isBack
            ? parseInt(this.$route.query.isBack)
            : 1;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/publicOperation/healthAudit/list",
                title: "健康讲堂审核"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted () {
        let query = this.$route.query;
        this.status = query.status ? query.status : 2
        this.statusChange(this.status);
    },
    methods: {
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
        },
        changeTab(item) {
            this.status = item.value,
            this.liveStatus='' 
            this.province = ''
            this.city = ''
            this.area = ''
            this.hospital = ''
            this.search = ''
        },
        searchInput() {
            this.pageNo = 1
            this.statusChange(this.status);
        },
        // 加载点播数据
        liveData(params) {
            this.$axios
                .post(api.findLecturePage, {
                    provinceCode: this.province,
                    cityCode: this.city,
                    areaCode: this.area,
                    hospitalId: this.hospital,
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    searchKey: this.search ? this.search.trim() : '',
                    ilive: 0,
                    menuType: 1,
                    playStatus:this.liveStatus,
                })
                .then(resp => {
                    if (resp.data.success) {
                        let ret = resp.data.object.records;
                        if(ret){
                            ret.forEach((item, index) => {
                            item.iSum = this.addZeros(index);
                            this.livexsList.forEach(s => {
                                if(s.id == item.playStatus) {
                                    item.status = s.name
                                }
                            })
                                item.videoSource =
                                    item.videoSource == 1 ? "网站地址" : "本地上传";
                            });
                            console.log(ret);
                            this.count = resp.data.object.total;
                            this.data1 = ret;
                        } else {
                            this.data1 = []
                            this.count = 0
                        }                     
                    } else {
                        this.$Message.error("请求失败,请稍候重试");
                    }
                });
        },
        // 加载直播数据
        verifyData (params) {
            this.data1 = []
             // 加载直播列表
            this.$axios.post(api.findLecturePage, {
                provinceCode: this.province,
                cityCode: this.city,
                areaCode: this.area,
                hospitalId: this.hospital,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                searchKey: this.search,
                playStatus:this.liveStatus,
                ilive: 1,
                menuType: 1,
            }).then(res => {
                if(res.data.success) {
                    let ret = res.data.object
                    if(ret.records){
                        ret.records.forEach((item, index) => {
                        item.iSum = this.addZeros(index);
                        });
                        this.count = ret.total
                        this.data1 = ret.records
                    } else {
                        this.data1 = []
                        this.count = 0
                    }
                    
                }
            })
        },
        statusChange (newVal) {
            this.data1 = []
            if(newVal==2) {
                this.columns = this.live
                this.liveData({ pageNo: this.pageNo, pageSize: this.pageSize });
            } else if(newVal==1) {
                this.columns = this.verify
                this.verifyData({ pageNo: this.pageNo, pageSize: this.pageSize })
            }

        },
        // 分页器改变加载数据
        loading (index) {
            this.pageNo = index;
            this.statusChange(this.status);
        },
    },
    // 监听status   tab页的变化
    watch: {
        status(newVal, oldVal) {
            this.pageNo = 1
            this.statusChange(newVal);
        }
    }
};
</script>
<style lang="less" scoped>
.physicianAudit {
    width: calc(100%);
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .tmpHeader {
        width: 100%;
        height: 40px;
        border-bottom: 2px solid #f2f2f2;
        span {
            display: inline-block;
            line-height: 38px;
            padding: 0 15px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.5s;
        }
        span.active {
            color: #5362e1;
            border-bottom: 2px solid #5362e1;
        }
        span:hover {
            border-bottom: 2px solid #5362e1;
            color: #5362e1;
        }
    }
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .page{
        text-align: center;
        margin: 20px 0;
    }
}
</style>
